<template>
	<view class="container">
		<view style="height: 20rpx"></view>
		<view @tap="toPage('list')" class="item flex-row add">
			<view class="icon flex-column">
				<text class="iconfont icon-user-add"></text>
			</view>
			<view class="title">新的好友</view>
		</view>
		<view @tap="toPage('group/index')" class="item flex-row group">
			<view class="icon flex-column">
				<text class="iconfont icon-group"></text>
			</view>
			<view class="title">我的群聊</view>
		</view>
		<view @tap="toPage('black')" class="item flex-row black">
			<view class="icon flex-column">
				<text class="iconfont icon-black-list"></text>
			</view>
			<view class="title">黑名单</view>
		</view>
		<view class="divider flex-row">
			<view class="title flex-column">我的好友</view>
		</view>
		<view @tap="toPage('detail?source=list&userId='+item.userId)" class="item flex-row" v-for="item in list" :key="item.id">
			<xbc-avatar :src="item.avatar" size="40px" />
			<view class="title">{{ item.name }}</view>
		</view>
		<view style="height: 20rpx"></view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import XBCIM from 'xbcim'

const list = ref([])
const status = ref('more')
const isComplete = ref(false)
const state = reactive({
	page: 1
})

function toPage(path: string) {
	uni.navigateTo({
		url: `/pages/contact/${path}`
	})
}

async function getList() {
	const res = await XBCIM.getFriendList(state)
	
	if(state.page > 1){
		list.value.push(...res?.list)
	}else{
		list.value = res?.list || []
	}
	
	isComplete.value = res?.isComplete
	status.value = isComplete.value ? 'no-more' : 'more'
}

onReachBottom(() => {
	if(isComplete.value) return
	state.page++
	getList()
})

getList()
</script>

<style lang="scss" scoped>
.divider {
	height: 110rpx;
	padding: 0 30rpx;
	position: relative;

	&::after {
		content: '';
		height: 1px;
		background-color: #f5f5f5;
		position: absolute;
		bottom: 50%;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.title {
		height: 100%;
		padding: 0 4rpx;
		font-size: 32rpx;
		background-color: #fff;
		position: absolute;
		z-index: 1;
		left: 30rpx;
		top: 0;
	}
}

.item {
	padding: 20rpx 30rpx;

	.icon {
		border-radius: 8rpx;
		@include fullsize(80rpx);

		.iconfont {
			color: #fff;
			font-size: 44rpx;
		}
	}

	.title {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		margin-left: 30rpx;
		@include line-height(80rpx);
	}

	&.add .icon {
		background-color: #ffa548;
	}

	&.group .icon {
		background-color: #4DA5F0;
	}

	&.black .icon {
		background-color: #9E9E9E;
	}
}
</style>